<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta charset="UTF-8">
		<title>服务记录</title>
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/reset.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/serviceLog.css" />
		<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<link rel="stylesheet" href="${BASE_PATH}/static/lib/myAlert/myAlert.css" />
		<style type="text/css">
			 body {font:14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;-webkit-text-size-adjust:none; -webkit-user-select: none; }
			a{
			  text-decoration: none;
			  color: black;
			}
			ul,li{margin:0;padding:0}
			ul,li{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			li,ul{list-style-type:none;}
			i{font-style:normal; font-weight:normal}
			.sliding{
				width: 100%;
				height: 45px;
				border-bottom: 1px solid #DDDDDD;
				background: #FFFFFF;
				margin-top: 39px;
				position: fixed;
				top: 0px;
			}
			.sliding ul{
				height: 45px;
				width: calc(100% - 30px);
				margin-left: 15px;
				font-size: 0;
			}
			.sliding li{
				width: 33%;
				height: 45px;
				display: inline-block;
				font-size: 15px;
				line-height: 45px;
				text-align: center;
				color: #f797b7;
				position: relative;
			}
			.on{
				color: #f797b7;;
				border-bottom: 2px solid #f797b7;
			}
			.dian{
				display: inline-block;
				position: relative;
				top: -10px;
				/*right: 5px;*/
				left: -5px;
				width: 16px;
				height: 16px;
				background: #f797b7;
				font-size: 14px;
				line-height: 16px;
				text-align: center;
				color: #FFFFFF;
				border-radius:8px ;
			}
			.container{
				width: 100%;
				margin-top: 10rem;
				margin-bottom: 50px;
			}
			.evaluation{
				color:#f797b7;
				border: 1px solid #f797b7 !important;
			}
			.aaa{
			  color: #e0e0e1;
			}
			.tishi{
			  text-indent: 2em;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="header" >
				<span class="back" onclick="history.go(-1);"></span>
				<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
				<span class="logo_text">OK 妈咪</span>
			</div>
			<div class="sliding">
				<ul>
					<li id="1">
						<a class="text <c:if test="${state==1}">on</c:if>" href="${BASE_PATH}/my/myInfo/list?state=1">全部</a>
						<span></span>
					</li>
					<li id="noEvaluate">
						<a class="text <c:if test="${state==2}">on</c:if>" href="${BASE_PATH}/my/myInfo/list?state=2">待评估</a>
						<span class="dian" style="display:none;"></span>
					</li>
					<li id="noAppraise">
						<a class="text <c:if test="${state==3}">on</c:if>" href="${BASE_PATH}/my/myInfo/list?state=3">待评价</a>
						<span class="dian" style="display:none;"></span>
					</li>
				</ul>
			</div>
		</header>
		<div class="container  am-g app-goods-list" id="postpList"></div>
		<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
			<a href="#top"><span class="am-gotop-title">回到顶部</span><i class="am-gotop-icon am-icon-chevron-up"></i></a>
		</div>
		<!--提示遮罩层-->
		<div class="mask point point-hide">
			<div class="mask-content">
				<h3>提示</h3>
				<div class="mask-main">
					<p class="tishi">欢迎加入OKmami会员大家族，我们致力于为产后女性提供：健康测评、咨询指导、产后恢复整体解决方案及全程修复服务。亲爱的宝妈要记得在每一次服务之后，来查看恢复师给我们提供的评估建议哦，同时欢迎宝妈对我们每次服务作出评价。
					</p>
					<a href="javascript:" class="btn-submit" id="allRight">好的</a>
				</div>
			</div>
		</div>
		<!--服务评估遮罩层-->
		<div class="mask assess" id="assess">
			
		</div>	
	</body>
	<!-- lib -->
	<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
	<!-- amazeui -->
	<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
	<!-- lib -->
	<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
	<script type="text/javascript" src="${BASE_PATH}/static/lib/myAlert/module.js"></script>
	<script type="text/javascript">
		var pageNum = 0,totalPage = 1,loading = false,orderNum,state = '${empty state?0:state}';
		
			$(function(){
					//绑定“加载中”进入加载事件
					Kit.util.onPageEnd(function(){
		               	if(pageNum < totalPage && !loading){
		               		loading = true;
		               		$("#postpList").append("<div class=\"app-loading\">正在加载</div>");
		               		Kit.ajax.post("${BASE_PATH}/my/myInfo/servicePage",{pageNum:pageNum+1,pageSize:10,state:'${state}'},function(result){
								$("#postpList").append(template("dataTpl",result.object));
								//amazeui要求在最后一个元素上添加am-u-end样式，否则默认为右浮动
								$(".app-goods-item","#postpList").removeClass("am-u-end").last().addClass("am-u-end");
								//图片延迟加载
								$("img.lazyload","#postpList").not(".lazyload-binded").lazyload({
									failurelimit : 100,
									effect : "show"
								}).addClass("lazyload-binded");
								$(".app-loading","#postpList").remove();
								pageNum = result.object.pageNumber;
								totalPage = result.object.totalPage;
								//没找到数据
								if(totalPage==0) {
									$("#postpList").append(template("dataTplz"));
								}
								//重置加载标识
								loading = false;
							});
		               	}
					});
					 
					Kit.ajax.get("${BASE_PATH}/my/myInfo/state",function(result){
						if(result.flag==0){
							var state = result.object.attrs;
							if(state.noEvaluate > 0){
								$("#noEvaluate .dian").html(state.noEvaluate).show();
							}
							if(state.noAppraise > 0){
								$("#noAppraise .dian").html(state.noAppraise).show();
							}
						}
					});
			});
		
			//提醒评估
			function txpg(id){
				Kit.ajax.post("${BASE_PATH}/my/myInfo/txpg",{id:id},function(result){
					if(result.flag==0){
						Kit.ui.toast("提醒成功");
					}else{
						Kit.ui.toast("提醒失败");
					}
				});
			}
			//查看评估
			function ckpg(id){
				Kit.ajax.post("${BASE_PATH}/my/myInfo/ckpg",{id:id},function(result){
					$("#assess").empty();
					$("#assess").append(template("dataTpls",result.object));
					$("#assess").addClass("mask-show");
				})
			}
		    function closemask() {
				$("#assess").removeClass("mask-show"); 
			 }
			//评价
			function evaluates(id){
				window.location.href="${BASE_PATH}/my/myInfo/evaluates?id="+id;
			}
		</script>
		 	<script type="text/html" id="dataTpl">
			{{each list as popst index}}
				<div class=" am-u-md-4 am-u-lg-3 app-goods-item">
					<div class="goods_pic">
						<div class="warp">
							<div class="warp-box">
								<p>{{popst.store_name}}</p>
								<p>{{popst.create_time}}</p>
								<div class="warp-content">
									<div class="warp-content-text">
										{{popst.project_name}}
									</div>
									<div class="warp-btns">
										{{if popst.is_evaluation==0 }}
											<span onclick="txpg('{{popst.id}}');">提醒评估</span>
										{{else if popst.is_evaluation==1 }}
											<span class="look-assess" onclick="ckpg('{{popst.id}}');">查看评估</span>
										{{/if}}
										{{if popst.is_evaluate==0 }}
											<span class="evaluation warp-btn3" onclick="evaluates('{{popst.id}}');">待评价</span>
										{{/if}}
									</div>
								</div>
							</div>
						</div>
                    </div>
				</div>
			{{/each}}
		</script>
	<script type="text/html" id="dataTpls">
			<div class="mask-content">
				<h3>服务评估</h3>
				<div class="mask-main">
					<p>亲爱的{{name}}:</p>
					<p>{{evaluation}}
					</p>
					<div class="mask-footer">
						<p>-- 恢复师:{{trueName}}</p>
						<p>{{create_time}}</p>
					</div>
					<span class="btn-submit" onclick="closemask();">确定</span>
				</div>
			</div>
		</script>
	<script type="text/html" id="dataTplz">
			<div style="margin-top:7rem;">
				<div>
					<img src="${BASE_PATH}/static/app/img/collectnone.png" style="margin:0 auto;display:block;" width="140">
					<div class="am-text-center app-m-t-10 aaa">暂无服务记录</div>
				</div>
			</div>
		</script>
		<script type="text/javascript">
		(function() {
			var test = window.location.href;
			if(test.indexOf("serviceLog")>=0){
				$(".point").removeClass("point-hide"); 
				//隐藏提醒遮罩层
				$("#allRight").on('click',function(){
					$(".point").addClass("point-hide");
				})
			}

		})()
	</script>
</html>